<html>
    <head>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            var tt = function() {
                return {
                    NUM_REQS: 20,
                    REQ_GET: 1,
                    REQ_POST: 20,
                    REQ_DELETE: 400,
                    rqueue: null,
                    _started: false,
                    numOK: 0,
                    numTotal: 0,
                    numFailed: 0,
                    reqs: 0,
                    time: {
                        start: 0,
                        end: 0
                    },
                    init: function() {
                        // start button handler
                        $('#controls .start').click(function() {
                            tt.toggleOn();
                        });
                        tt.numTotal = tt.NUM_REQS*3;
                        tt.showTotal();
                    },
                    toggleOn: function() {
                        if (tt._started) {
                            tt.stop();
                        }
                        else {
                            tt.start();
                        }
                    },
                    stop: function() {
                        tt.time.end = new Date().getTime();
                        tt._started = false;
                        $('#controls .start').text('Start');
                        $('#controls').html('<p>Done: ' + (tt.time.end - tt.time.start) + '</p>');
                    },
                    start: function() {
                        tt._started = true;
                        $('#controls .start').text('Stop');
                        tt.time.start = new Date().getTime();

                        if (!tt.rqueue) {
                            // first time
                            tt.rqueue = [];
                            for (var i=0; i<tt.NUM_REQS; i++) {
                                    tt.rqueue.push(
                                        $.ajax({
                                            type: 'POST',
                                            url: '/post/content/foo'+i,
                                            data: { value: 'bar'+i+'p'+tt.time.start },
                                            success: function(data) {
                                                tt.incOK();
                                                tt.checkFinish();
                                            },
                                            error: function (xhr, textStatus, errorThrown) {
                                                tt.addNotice('FAILURE(p)');
                                                tt.incFail();
                                                tt.checkFinish();
                                            }
                                        })
                                    );
                                    tt.addNotice('Added POST REQUEST ' + i+'p');

                                    tt.rqueue.push(
                                        $.ajax({
                                            type: 'GET',
                                            url: '/get/content/foo'+i,
                                            success: function(data) {
                                                tt.incOK();
                                                tt.checkFinish();
                                            },
                                            error: function (xhr, textStatus, errorThrown) {
                                                tt.addNotice('FAILURE(g)');
                                                tt.incFail();
                                                tt.checkFinish();
                                            }
                                        })
                                    );
                                    tt.addNotice('Added GET REQUEST ' + i+'g');

                                    tt.rqueue.push(
                                        $.ajax({
                                            type: 'POST',
                                            url: '/delete/content/foo'+i,
                                            data: { value: 'bar'+i+'d' },
                                            success: function(data) {
                                                tt.incOK();
                                                tt.checkFinish();
                                            },
                                            error: function (xhr, textStatus, errorThrown) {
                                                tt.addNotice('FAILURE(d)');
                                                tt.incFail();
                                                tt.checkFinish();
                                            }
                                        })
                                    );
                                    tt.addNotice('Added DELETE REQUEST ' + i+'d');
                            }
                        }
                    },
                    showTotal: function() {
                        $('#counter .total').html(tt.numTotal);
                    },
                    incTotal: function() {
                        tt.numTotal++;
                        $('#counter .total').html(tt.numTotal);
                    },
                    incOK: function() {
                        tt.numOK++;
                        $('#counter .done').html(tt.numOK);
                    },
                    incFail: function() {
                        tt.numFailed++;
                        $('#counter .failed').html(tt.numFailed);
                    },
                    addNotice: function(s) {
                        $('#notices').append(s + '<br/>');
                    },
                    checkFinish: function() {
                        if ((tt.numOK + tt.numFailed) == tt.NUM_REQS*3) {
                            tt.stop();
                        }
                    }
                }
            }();

            $(function() { tt.init(); });
        </script>
        <style type="text/css">
            body {
                font-family: "andale mono", monospace;
                }
            #wrapper {
                width: 50%;
                margin: 0 auto;
                background: #ddd;
                border-top: 2px solid #666;
                }
                #wrapper .inner {
                    padding: 1em 3em;
                    }
            #counter p {
                font-size: 200%;
                margin: 0;
                }
            #controls {
                margin: 1em 0;
                }
            #notices {
                background: #fff;
                font-size: 80%;
                margin-top: 1em;
                padding: 0.5em;
                }
                .failed { color: #a00; }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div class="inner">
                <div id="counter">
                    <p>
                        <span class="done">0</span>|<span class="failed">0</span>/<span class="total">0</span>
                    </p>
                </div>
                <div id="controls">
                    <button class="start">Start</button>
                </div>
                <div id="notices">
                </div>
            </div>
        </div>
    </body>
</html>
